import React from 'react';
import {
    Modal,
    Image,
    Stack,
    Group,
    Text,
    Title,
    Badge,
    Button,
    Divider,
    Grid,
    Card,
    Center,
    Loader,
    Alert,
    Box,
    Rating
} from '@mantine/core';
import { IconShoppingCart, IconHeart, IconShare, IconTruck, IconShield, IconRefresh } from '@tabler/icons-react';
import { Product } from '../../types';
import { formatCurrency, formatDate } from '../../utils';
import { useProduct } from '../../hooks';

interface ProductDetailProps {
    productId: number | null;
    opened: boolean;
    onClose: () => void;
}

const ProductDetail: React.FC<ProductDetailProps> = ({ productId, opened, onClose }) => {
    const { data: product, isLoading, error } = useProduct(productId || 0);

    if (!productId) {
        return null;
    }

    const renderContent = () => {
        if (isLoading) {
            return (
                <Center h={400}>
                    <Loader size="lg" />
                </Center>
            );
        }

        if (error) {
            return (
                <Alert color="red" title="加载失败">
                    {error}
                </Alert>
            );
        }

        if (!product) {
            return (
                <Alert color="yellow" title="未找到商品">
                    商品信息不存在
                </Alert>
            );
        }

        return (
            <Grid>
                {/* 商品图片 */}
                <Grid.Col span={{ base: 12, md: 6 }}>
                    <Card withBorder>
                        <Image
                            src={product.imageUrl}
                            alt={product.name}
                            h={400}
                            fallbackSrc="https://via.placeholder.com/400x400?text=No+Image"
                            radius="md"
                        />
                    </Card>
                </Grid.Col>

                {/* 商品信息 */}
                <Grid.Col span={{ base: 12, md: 6 }}>
                    <Stack gap="lg">
                        {/* 标题和价格 */}
                        <Stack gap="sm">
                            <Group justify="space-between" align="flex-start">
                                <Title order={2} size="h2">
                                    {product.name}
                                </Title>
                                <Badge color="blue" variant="light" size="lg">
                                    {product.category}
                                </Badge>
                            </Group>

                            <Text size="xl" fw={700} c="blue">
                                {formatCurrency(product.price)}
                            </Text>
                        </Stack>

                        {/* 评分和库存 */}
                        <Group justify="space-between">
                            <Group gap="xs">
                                <Rating value={product.rating} readOnly size="sm" />
                                <Text size="sm" c="dimmed">
                                    ({product.rating}) {product.reviews?.length || 0} 评价
                                </Text>
                            </Group>
                            <Text
                                size="sm"
                                fw={500}
                                c={product.stock > 10 ? 'green' : product.stock > 0 ? 'orange' : 'red'}
                            >
                                {product.stock > 0 ? `库存: ${product.stock}` : '缺货'}
                            </Text>
                        </Group>

                        <Divider />

                        {/* 商品描述 */}
                        <Stack gap="xs">
                            <Title order={4}>商品描述</Title>
                            <Text c="dimmed" size="sm">
                                {product.description}
                            </Text>
                        </Stack>

                        <Divider />

                        {/* 服务保障 */}
                        <Stack gap="sm">
                            <Title order={4}>服务保障</Title>
                            <Grid>
                                <Grid.Col span={4}>
                                    <Group gap="xs">
                                        <IconTruck size={16} color="var(--mantine-color-green-6)" />
                                        <Text size="xs" c="dimmed">免费配送</Text>
                                    </Group>
                                </Grid.Col>
                                <Grid.Col span={4}>
                                    <Group gap="xs">
                                        <IconShield size={16} color="var(--mantine-color-blue-6)" />
                                        <Text size="xs" c="dimmed">品质保证</Text>
                                    </Group>
                                </Grid.Col>
                                <Grid.Col span={4}>
                                    <Group gap="xs">
                                        <IconRefresh size={16} color="var(--mantine-color-orange-6)" />
                                        <Text size="xs" c="dimmed">7天退换</Text>
                                    </Group>
                                </Grid.Col>
                            </Grid>
                        </Stack>

                        <Divider />

                        {/* 操作按钮 */}
                        <Stack gap="sm">
                            <Group grow>
                                <Button
                                    size="md"
                                    disabled={product.stock === 0}
                                    leftSection={<IconShoppingCart size={18} />}
                                >
                                    {product.stock > 0 ? '加入购物车' : '缺货'}
                                </Button>
                                <Button
                                    variant="outline"
                                    size="md"
                                    leftSection={<IconHeart size={18} />}
                                >
                                    收藏
                                </Button>
                            </Group>

                            <Button
                                variant="light"
                                size="sm"
                                leftSection={<IconShare size={16} />}
                                fullWidth
                            >
                                分享商品
                            </Button>
                        </Stack>

                        {/* 商品信息 */}
                        <Box bg="gray.0" p="sm" style={{ borderRadius: 8 }}>
                            <Stack gap="xs">
                                <Text size="xs" c="dimmed">
                                    商品ID: {product.id}
                                </Text>
                                <Text size="xs" c="dimmed">
                                    上架时间: {formatDate(product.createdAt)}
                                </Text>
                            </Stack>
                        </Box>
                    </Stack>
                </Grid.Col>
            </Grid>
        );
    };

    return (
        <Modal
            opened={opened}
            onClose={onClose}
            title="商品详情"
            size="xl"
            centered
            padding="lg"
        >
            {renderContent()}
        </Modal>
    );
};

export default ProductDetail;